/*
 * @Author: Eli.Chen
 * @Date: 2025-03-17 17:55:37
 * @LastEditors: Eli.Chen
 * @LastEditTime: 2025-04-30 16:26:42
 * @Description:
 */
import React, { useState, useEffect } from 'react';
import { Carousel, Card } from 'antd';
import { useSelector } from 'react-redux';

import { getTodayRecommend } from '@/api/suggest';
import { urlMap, imagesMap } from '@/utils';
const contentStyle = {
    width: '100%',
    height: '400px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};
const AutoCarousel = () => {
    const [todayRecList, setTodayRecList] = useState([]);
    const { cityCode } = useSelector((state) => state.uLocation);

    const getDataList = async () => {
        const res = await getTodayRecommend(cityCode);
        if (res?.code === 200) {
            setTodayRecList(res?.data);
        }
    };

    useEffect(() => {
        getDataList();
    }, []);
    const items = [
        {
            key: '1',
            title: '艾糍',
            src: require('@/assets/images/article/4.jpg'),
        },
        {
            key: '2',
            title: '灰塑',
            src: require('@/assets/images/com/7.png'),
        },
        {
            key: '3',
            title: '艇仔粥',
            src: require('@/assets/images/com/8.png'),
        },
    ];
    return (
        <Carousel
            autoplay
            effect="scrollx"
            easing="ease-in-out"
            speed={800}
            style={{
                padding: '30px 40px',
                '--custom-dot-color': '#3C6255',
            }}
            dotStyle={{
                backgroundColor: 'rgba(60,98,85,0.3)',
                width: 12,
                height: 12,
                borderRadius: '50%',
            }}
            activeDotStyle={{
                backgroundColor: '#3C6255',
                width: 16,
                height: 16,
            }}
        >
            {todayRecList?.map((item) => (
                <Card
                    hoverable
                    style={{
                        width: 320,
                        height: 450,
                        borderRadius: 15,
                        boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
                        transition: 'transform 0.3s ease',
                        overflow: 'hidden',
                    }}
                    styles={{
                        body: {
                            padding: 0,
                            height: '100%',
                            display: 'flex',
                            flexDirection: 'column',
                        },
                    }}
                >
                    <img
                        src={urlMap.defaultUrl + imagesMap.todayRecommendPath + item?.coverPath}
                        alt={item?.title}
                        style={{
                            width: '100%',
                            height: 300,
                            objectFit: 'cover',
                            borderBottom: '3px solid #3C6256',
                        }}
                    />
                    <div
                        style={{
                            padding: 20,
                            textAlign: 'center',
                            fontSize: 22,
                            fontFamily: "'STXingkai', cursive",
                            // color: '#3C6255',
                            fontWeight: 600,
                            flex: 1,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}
                    >
                        {item?.title}
                    </div>
                </Card>
            ))}
        </Carousel>
    );
};
export default AutoCarousel;
